<template>
  <div class="guibinting">
    <!-- 头部 -->
    <guibintinghead @goSearch="goSearch" ref="searchHead" :activeIndex="activeIndex"></guibintinghead>
    <!-- 索引列表 -->
    <van-tabs v-model="activeIndex" color='#2890EE' @click="changeTab(activeIndex)">
      <van-tab title="机场贵宾厅" class="tab-item">
        <van-index-bar :index-list="letterList" v-if="activeIndex==0">
          <div v-for="(item, index) in airportViproomList">
            <van-index-anchor :index="item.letter" class="intitle"/>
            <ul>
              <li v-for="(item1,index1) in item.itemList" :key="index1 + 'A'">
                <p class="p" style="font-size: 16px; font-weight: 700;">{{item1.airportName}}</p>
                <div class="ol" v-for="(item2, index2) in item1.viproomList" :key="index2 + 'b'"
                     @click="goGoodsDetail(item2.goodsId,1)">
                  <img :src="item2.coverImg|imgPathFilter" class="li-img" alt="">
                  <div class="li">
                    <span>{{item2.goodsName}}</span>
                    <p>
                      <img src="../../assets/address.png" alt="" width="15">
                      <span v-if="item2.securityType==1">安检内</span>
                      <span v-if="item2.securityType==2">安检外</span>
                      <span v-if="item2.securityType==3">航班不同前往不同休息室</span>
                    </p>
                    <p>
                      <img src="../../assets/clock.png" alt="">
                      营业时间： {{item2.roomTime}}
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-index-bar>
      </van-tab>

      <van-tab title="机场贵宾通道" class="tab-item">
        <van-index-bar :index-list="letterList" v-if="activeIndex==1">
          <div v-for="(item, index) in airportViponlyList">
            <van-index-anchor :index="item.letter" class="intitle"/>
            <ul>
              <li v-for="item1 in item.itemList">
                <p class="p" style="font-size: 16px; font-weight: 700;">{{item1.airportName}}</p>
                <div class="ol" v-for="(item2, index2) in item1.viponlyList" :key="index2 + 'b'" @click="goViponlyDetail(item2.goodsId)">
                  <div class="li">
                    <span>{{item2.goodsName}}</span>
                    <p>
                      <img src="../../assets/clock.png" alt="">
                      营业时间： {{item2.viponlyTime}}
                    </p>
                    <p>
                      <img src="../../assets/address.png" alt="" width="15">
                      <span> {{item2.viponlyAddress}}</span>
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-index-bar>
      </van-tab>

      <van-tab title="高铁贵宾厅" class="tab-item">
        <van-index-bar :index-list="letterList" v-if="activeIndex==2">
          <div v-for="(item, index) in highSpeedTrainList">
            <van-index-anchor :index="item.letter" class="intitle"/>
            <ul>
              <li v-for="item1 in item.itemList">
                <p class="p" style="font-size: 16px; font-weight: 700;">{{item1.highSpeedTrainName}}</p>
                <div class="ol" v-for="(item2, index2) in item1.viproomList" :key="index2 + 'b'"
                     @click="goGoodsDetail(item2.goodsId,2)">
                  <img :src="item2.coverImg|imgPathFilter" class="li-img" alt="">
                  <div class="li">
                    <span>{{item2.goodsName}}</span>
                    <p>
                      <img src="../../assets/address.png" alt="" width="15">
                      <span v-if="item2.securityType==1">安检内</span>
                      <span v-if="item2.securityType==2">安检外</span>
                      <span v-if="item2.securityType==3">航班不同前往不同休息室</span>
                    </p>
                    <p>
                      <img src="../../assets/clock.png" alt="">
                      营业时间： {{item2.roomTime}}
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </van-index-bar>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
  import {getAirportListViproom, getAirportListViponly, getHighSpeedTrainList} from '../../../test/unit/http'
  import guibintinghead from './components/guibintinghead'

  export default {
    name: 'allguibinting',
    components: {
      guibintinghead
    },
    data() {
      return {
        airportViproomList: [],
        highSpeedTrainList: [],
        airportViponlyList: [],
        letterList: [],
        letter: {},
        activeIndex: 0
      }
    },
    methods: {
      goSearch(params) {
        if (this.activeIndex == 0) {
          this.getAirportListViproomData({airportName: params.name})
        }
        if (this.activeIndex == 1) {
          this.getAirportListViponlyData({airportName: params.name})
        }
        if (this.activeIndex == 2) {
          this.getHighSpeedTrainListData({highSpeedTrainName: params.name})
        }
      },
      changeTab(activeIndex) {
        this.$refs['searchHead'].cleanParams();
        if (activeIndex == 0) {
          this.getAirportListViproomData({});
        }
        if (activeIndex == 1) {
          this.getAirportListViponlyData({})
        }
        if (activeIndex == 2) {
          this.getHighSpeedTrainListData({})
        }
      },
      goAirportViproom(airport) {
        this.$router.push({
          path: '/airportguibinting',
          query: {airportId: airport.airportId, activeIndex: this.activeIndex}
        })
      },
      goHighSpeedTrainViproom(highSpeedTrain) {
        this.$router.push({
          path: '/trainguibinting',
          query: {highSpeedTrainId: highSpeedTrain.highSpeedTrainId, activeIndex: this.activeIndex}
        })
      },
      goAirportShop(airport) {
        this.$router.push({path: '/shoplist', query: {airportId: airport.airportId, activeIndex: this.activeIndex}})
      },
      getAirportListViproomData(params) {
        let that = this;
        that.queryAirportListViproom(params);
      },
      getHighSpeedTrainListData(params) {
        let that = this;
        that.queryHighSpeedTrainList(params)
      },
      getAirportListViponlyData(params) {
        let that = this;
        that.queryAirportListViponly(params)
      },
      queryAirportListViproom(params) {
        let that = this;
        getAirportListViproom(params).then(res => {
          console.info("res", res);
          if (res.code == 100) {
            that.airportViproomList = res.object.list;
            that.letterList = res.object.letterList;
          }
        })
      },
      queryAirportListViponly(params) {
        let that = this;
        getAirportListViponly(params).then(res => {
          console.info("res", res);
          if (res.code == 100) {
            that.airportViponlyList = res.object.list;
            that.letterList = res.object.letterList;
          }
        })
      },
      queryHighSpeedTrainList(params) {
        let that = this;
        getHighSpeedTrainList(params).then(res => {
          console.info("res", res);
          if (res.code == 100) {
            that.highSpeedTrainList = res.object.list;
            that.letterList = res.object.letterList;
          }
        })
      },
      initData(params) {
        let activeIndex = this.$route.query.activeIndex;
        if (activeIndex) {
          this.activeIndex = Number(activeIndex)
        } else {
          this.activeIndex = 0;
        }
        this.turnToActiveIndex(this.activeIndex, params)
      },
      turnToActiveIndex(activeIndex, params) {
        if (activeIndex == 0) {
          this.getAirportListViproomData(params);
        }
        if (activeIndex == 1) {
          this.getAirportListViponlyData(params);
        }
        if (activeIndex == 2) {
          this.getHighSpeedTrainListData(params)
        }
      },
      goGoodsDetail(goodsId, viproomType) {
        if (viproomType == 1) {
          this.$router.push({
            path: '/guibindetail',
            query: {entrySource: "home", goodsId: goodsId, activeIndex: this.activeIndex}
          })
        }
        if (viproomType == 2) {
          this.$router.push({path: '/trainguibindetail', query: {goodsId: goodsId, activeIndex: this.activeIndex}})
        }
      },
      goViponlyDetail(goodsId){
        this.$router.push({path: 'tongdaodetail', query: {goodsId: goodsId,entrySource:'home',activeIndex: this.activeIndex}});
      }
    },
    created() {
      this.initData({});
    }
  }
</script>

<style scoped>
  .container {
    position: relative;
    z-index: 0;
  }

  .intitle {
    width: 100%;
    text-align: left;
    font-size: 13px;
    background: #F7F8FA;
  }

  ul {
    width: calc(100% - 32px);
    margin: 0 auto;
    /* padding: 0 16px; */
    box-sizing: border-box;
    background: #ffffff;
  }

  ul li {
    width: 100%;
    padding: 12px 0;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 14px;
    text-align: left;
    border-bottom: 1px solid #E7E7E7;
  }

  ul li:nth-last-child(1) {
    border-bottom: none;
  }

  .nolist {
    margin-top: 150px;
  }

  .nolist img {
    width: 186px;
    height: 160px;
    margin-bottom: 24px;
  }

  .nolist p {
    font-size: 13px;
    color: #BBBBBB;
  }


  ul li .p {
    margin-bottom: 8px;
  }

  .ol .li-img {
    width: 120px;
    height: 80px;
    margin-right: 5px;
    border-radius: 10px;
  }

  .ol {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    height: 100px;
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .ol .li {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: 80px;
    margin-top: 5px;
  }

  .ol .li img {
    width: 15px;
    height: 17px;
  }

  .ol .li h3,
  .ol .li p {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
  }

  .ol .li p {
    display: flex;
    justify-content: flex-start;
    align-content: center;
    line-height: 17px;
    color: #8c8c8F;
  }

  .ol .li p img {
    margin-right: 5px;
  }
</style>
